<template>
  <div>
    <template>
      <el-main>
        <el-row>
          <el-col span="16">
            <el-button @click="handleAdd" icon="el-icon-circle-plus" type="primary">增加</el-button>
            <el-button type="primary">下载列表</el-button>
          </el-col>
          <el-col span="8">
            <el-autocomplete
                class="right-search"
                v-model="state"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入客户名称"
                @select="handleSelect"
            ></el-autocomplete>
            <el-button @click="searchData" icon="el-icon-search" type="primary">搜索</el-button>
          </el-col>
        </el-row>
      </el-main>
      <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          style="width: 100%"
          border>
        <el-table-column
            align="center"
            property="id"
            label="编号"
            width="60">
        </el-table-column>
        <el-table-column
            sortable
            align="center"
            property="customerName"
            label="客户名称"
            width="120">
        </el-table-column>
        <el-table-column
            property="title"
            label="概要"
            align="center"
            width="120">
        </el-table-column>
        <el-table-column
            sortable
            property="contact"
            label="联系人"
            align="center">
        </el-table-column>
        <el-table-column
            property="contactTel"
            label="联系人电话"
            align="center">
        </el-table-column>
        <el-table-column
            property="createDate"
            label="创建时间"
            align="center">
        </el-table-column>
        <el-table-column
            property="status"
            label="状态"
            align="center"
            sortable
            width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '0'" type="info" value="0">启用</el-tag>
            <el-tag v-if="scope.row.status === '1'" type="warning" value="1">流失</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            property="operation"
            label="操作"
            align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="info"
                >指派</el-button>
            <el-button size="mini"
                       type="primary"
                       icon="el-icon-edit"
                       circle
                       @click="handleUpdate(scope.row)"></el-button>
            <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                circle
                @click="handleDelete(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加或修改用户对话框 -->
      <template slot-scope="scope">
        <el-tag v-if="scope.row.status === '0'" type="info" value="0">启用</el-tag>
        <el-tag v-if="scope.row.status === '1'" type="warning" value="1">流失</el-tag>
      </template>
      <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="600px">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户姓名" prop="customerName">
                <el-input v-model="form.customerName" placeholder="请输入姓名"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="概要" prop="title">
                <el-input v-model="form.title" placeholder="请输入概要" maxlength="50"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人" prop="contact">
                <el-input v-model="form.contact" placeholder="请输入联系人"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="contactTel">
                <el-input v-model="form.contactTel" placeholder="请输入联系人手机号码" maxlength="11"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态">
                <el-radio-group v-model="form.status">
                  <el-radio label="0">已分配</el-radio>
                  <el-radio label="1">未分配</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
            :page-sizes="[5, 10, 15]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
import {deleteChance, findById, getSaleChance, insertSaleChance, updateSaleChance} from "@/api/salechance";




export default {
  name: "CustomChanceView",
  data() {
    return {
      tableData: [],
      open:false,
      form:{
        name:'',
        customerName:'',
        title:'',
        contact:'',
        contactTel:'',
        status:''
      }

    }
  },
  created() {
    this.loadChanceList();
  },
  mounted() {
    this.loadChanceList();
  },

  methods: {
    //添加方法
    handleAdd() {
      this.open = true;
      this.title = "添加用户";
    },
    //修改方法
    handleUpdate(row) {
      findById(row.id).then(response => {
        console.log(response)
        this.form=response.data
        this.open = true;
        this.title = "修改用户";
      });
    },
    //删除方法
    handleDelete(id) {
      deleteChance(id).then(res => {
        if (res.code === 200) {
          this.msgSuccess("删除成功!");
          this.reset();
        } else {
          this.msgError("删除失败!");
        }
      })
    },
    //取消按钮
    cancel() {
      this.open = false;
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id === undefined) {
            insertSaleChance(this.form).then(res => {
              if (res.code === 200) {
                this.msgSuccess('提交成功!');
                this.open = false;
                this.reset();
              }
            })
          } else updateSaleChance(this.form).then(res => {
            if (res.code === 200) {
              this.msgSuccess('提交成功!');
              this.open = false;
              this.reset();
            }
          })
        }
      });
    },

    //重置页面和表单
    reset() {
      this.form = {}
      this.loadChanceList()
    },
    //加载table
    loadChanceList() {
      getSaleChance().then(res => {
        this.tableData = res.data
      })
    }
  }
}

</script>


<style scoped>

.right-search {

}
</style>
